import { FileUpload } from '@/components/index.jsx';
import { Avatar, Tooltip } from 'antd';
import StringUtil from '@/utils/string.js';

/**
 * 头像上传
 *
 * @param {object} props 属性
 * @param {string} props.username 用户名
 */
export default function AvatarUpload(props) {
  const { id, value, onChange, username } = props;

  if (StringUtil.isEmpty(username)) {
    return <>用户名为空，无法上传头像</>;
  }

  return (
    <div style={{ width: 100 }}>
      <FileUpload
        path={`用户头像/${username}`}
        onSuccess={(url) => {
          onChange && onChange(url);
        }}
        render={() => {
          return (
            <Tooltip title="点击上传头像">
              <Avatar id={id} size={100} style={{ cursor: 'pointer' }} src={value} />
            </Tooltip>
          );
        }}
      />
    </div>
  );
}
